<!DOCTYPE html>
<script src="../../../../../resources/testharness.js"></script>
<script src="../../../../../resources/testharnessreport.js"></script>
<script src="../../../../../fast/spatial-navigation/resources/snav-testharness.js"></script>

<style>
  div {
    width: 100px;
    height: 100px;
    margin: 5px;
    border: 1px solid black;
  }
</style>

<div id="first" tabindex="0">First</div>
<input id="second" type="text" value="Second (|d| key will remove)"></input>
<div id="third" tabindex="0">Third</div>

<script>
  // This checks that setting |display:none| on an editable element that is
  // interested and focused resets spat nav and allows further navigation.
  let first = document.getElementById("first");
  let second = document.getElementById("second");
  let third = document.getElementById("third");

  function setDisplayNone() {
    return new Promise(function(resolve) {
      second.style.display = "none";
      // Need a rAF for automated testing since focus won't be reevaluated
      // until BeginFrame.
      requestAnimationFrame(() => requestAnimationFrame(resolve));
    });
  }

  // For manual testing.
  second.addEventListener('keydown', (e) => {
    if (e.key == 'd')
      setDisplayNone();
  });

  promise_test(async () => {
    // Move interest to 'second' and focus it.
    snav.triggerMove('Down');
    snav.triggerMove('Down');
    eventSender.keyDown('Enter');

    assert_equals(window.internals.interestedElement,
                  second,
                  "Input box starts off with interest.");
    assert_equals(document.activeElement,
                  second,
                  "Enter key moves focus into 'second'");

    // Set |display:none| on the focused input. Ensure navigation resets and
    // starts as if from un-interested; continues to work.
    await setDisplayNone();

    snav.triggerMove('Down');
    assert_equals(window.internals.interestedElement,
                  first,
                  "'first' box should be interested.");

    snav.triggerMove('Down');
    assert_equals(window.internals.interestedElement,
                  third,
                  "'third' box should be interested.");

  }, "Spat-Nav resets gracefully after focused editable becomes display:none.");
</script>
